import React, { Component } from 'react';
import { connect } from 'react-redux'
import { login } from '../../store/user'
import { Form, Input, Button } from 'antd';
const FormItem = Form.Item;


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        }
    }
    changeValue = (e, key) => {
        this.setState({ [key]: e.target.value })
    }

    loginAct = () => {
        const { username, password } = this.state;
        const { dispatch } = this.props;
        dispatch(login({ username, password }))
    }

    render() {
        const { username, password } = this.state;
        return <div className="dfcc">
            <Form style={{ width: 375 }}
    
            className="dfcc">
                <FormItem className="m-b-8" label="username" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} ><Input value={username} onChange={(e) => this.changeValue(e, 'username')} /></FormItem>
                <FormItem className="m-b-8" label="password" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} ><Input type="password" value={password} onChange={(e) => this.changeValue(e, 'password')} /></FormItem>
                <Button type="primary" onClick={this.loginAct} >Login</Button>
            </Form>
        </div>
    }
}

export default connect()(Login)